import React from 'react';
import { Tag, Badge } from 'antd';
const CheckableTag = Tag.CheckableTag;
class RightBar extends React.Component {
  state = {
    selectedTags: [],
    tags: [],
    showAll: true,
  };

  componentDidMount() {
    this.showAll();
  }

  componentWillReceiveProps(nextProp) {
    const jsonTree = nextProp.jsonTree;
    let tagsArr = [];
    const newTags = [];
    const existTag = [];

    const filterTag = nextProp.filterTag;
    if(filterTag.length) {
      const filterJsonTrees = {};
      Object.values(nextProp.jsonTree).forEach(ele => {
        let containerAllTags = true;
        for (let i = 0, len = filterTag.length; i < len; i++) {
          if (!ele.tags.includes(filterTag[i])) {
            containerAllTags = false;
          }       
        }
        if (containerAllTags) {
          filterJsonTrees[ele.path] = nextProp.jsonTree[ele.path];
        }
      });
      Object.values(filterJsonTrees) && Object.values(filterJsonTrees).forEach(item => {
        tagsArr = [...tagsArr, ...item.tags];
      });
    } else {
      Object.values(jsonTree) && Object.values(jsonTree).forEach(item => {
        tagsArr = [...tagsArr, ...item.tags];
      });
    }
    tagsArr.sort((item1, item2) => {
      if (item1 > item2) {
        return 1;
      } else if (item1 <=item2) {
        return -1;
      }
    });
    const noDoubleArr = Array.from(new Set(tagsArr));
    noDoubleArr.forEach(item => {
      let repeatNum = 0;
      const tagsObj = {};
      for (let i = 0, len = tagsArr.length; i < len; i++) {
        if (tagsArr[i] === item) {
          repeatNum ++;
        }
      }
      existTag.push(item);
      tagsObj.name = item;
      tagsObj.num = repeatNum;
      newTags.push(tagsObj);
    });
    const { selectedTags } = this.state;
    const selectTagsExist = selectedTags.filter(item2 => {
      return existTag.includes(item2);
    });
    if (selectTagsExist.length !== selectedTags.length) {
      this.props.filterTagFuc(selectTagsExist);
    }
    if (selectTagsExist.length) {
      this.setState({ tags: newTags, selectedTags: selectTagsExist, showAll: false });      
    } else {
      this.setState({ tags: newTags, selectedTags: selectTagsExist, showAll: true }); 
    }
  }

  handleChange(tag, checked) {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked ?
            [...selectedTags, tag] :
            selectedTags.filter(t => t !== tag);
    this.setState({ selectedTags: nextSelectedTags, showAll: false }, function() {
      this.props.filterTagFuc(nextSelectedTags);      
    });            
  }

  showAll = () => {
    if (this.props.filterTag.length || (this.props.filterTag.length === 0)) {
      this.setState({showAll: true, selectedTags: []}, function() {
        this.props.filterTagFuc([]);
      });
    }
  }

  render() {
    const { selectedTags, tags } = this.state;
    return (
      <div id="rightPanel">
        <h1 style={{ fontSize: '16px', color: 'white' }}>标签统计：</h1>
        {
          (Object.keys(this.props.jsonTree).length > 0) && (<div id="showAll">
            <CheckableTag
            checked={this.state.showAll}
            onChange={this.showAll}
            >
            展示所有
            </CheckableTag>          
          </div>)
        }
        {tags.map(tag => (
          <Badge count={tag.num} key={tag.name}>
            <CheckableTag
              key={tag.name}
              checked={selectedTags.indexOf(tag.name) > -1}
              onChange={checked => this.handleChange(tag.name, checked)}
            >
              {tag.name}
            </CheckableTag>
          </Badge>
        ))}       
      </div>
    );
  }
}

export default RightBar;
